/**
 * react-dnd拖拽组件中的drag组件，即具体拖动内容
 * @props id 用以识别组件的属性，在组件外操作组件时可以确定是哪个组件 - string, number
 * @props left 组件距离容器最左侧距离- string, number
 * @props top 组件距离容器最上方距离 - string, number
 * @props hideSourceOnDrag 拖拽组件时是否隐藏原组件-bool
 * @props children 组件的子节点，即拖拽组件的具体内容-any
 * @props style 组件的样式 - object
 * @props DragTypeString 组件的拖拽类别，用以与可拖拽区域的容器匹配 - string
 */

import { useDrag } from 'react-dnd'
import PropsType from "prop-types";

const DraggableBox = ({ id, left, top, hideSourceOnDrag, children, style, DragTypeString }) => {
  const [{ isDragging }, drag] = useDrag(
    () => ({
      type: DragTypeString,
      item: { id, left, top },
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    [id, left, top],
  )
  if (isDragging && hideSourceOnDrag) {
    return <div ref={drag} />
  }
  return (
    <div
      className="box"
      ref={drag}
      style={{ ...style, left, top, position: 'absolute' }}
    >
      {children}
    </div>
  )
}

DraggableBox.propTypes = {
  id: PropsType.oneOfType([PropsType.number, PropsType.string]),
  hideSourceOnDrag: PropsType.bool.isRequired,
  left:  PropsType.oneOfType([PropsType.number, PropsType.string]),
  top:  PropsType.oneOfType([PropsType.number, PropsType.string]),
  children: PropsType.node,
  style: PropsType.object,
  DragTypeString: PropsType.string.isRequired
}

export default DraggableBox